<template><!--设置-->
    <div style="height: 100%;">
        <navbar :title="$t('setting')"></navbar>
        <div class="content-noBottom">
            <ul>
                <li class="installation-password">
                    <div @click="goPage('/setPassword')">
                        {{ $t("set_pwd") }}
                        <i class="arrow-right"></i><!--修改密码-->
                    </div>
                </li>
            </ul>
            <div class="tabbar-no-icon">
                <ul>
                    <li>
                        <div @click="selectLan = true">
                            {{ $t("set_lan") }}
                            <i class="arrow-right"></i><!--多语言-->
                        </div>
                    </li>
                    <li>
                        <div @click="goPage('/setPrivacy')">
                            {{ $t("set_privacy") }}
                            <i class="arrow-right"></i><!--隐私设置-->
                        </div>
                    </li>
                    <li>
                        <div @click="goPage('/about')">
                            {{ $t("set_about") }}<!--关于我们-->
                            <i class="arrow-right"></i>
                            <span style="float: right;color: #999999;">{{ $t("set_about_version") }}</span><!--版本-->
                        </div>
                    </li>
                    <li>
                        <div @click="goPage('/privacyAgreement')">
                            {{ $t("privacy_agreement_summary") }}
                            <i class="arrow-right"></i><!--隐私协议摘要-->
                        </div>
                    </li>
                    <!-- 微信openid  -->
                    <li class="clearfix" @click="onUnbind(false)" v-if="usrWeixinId">
                        <div>
                            <span class="list-left">{{ $t('weixin_unbind') }}</span>
                            <i class="arrow-right"></i>
                        </div>
                    </li>
                </ul>
            </div>
            <!--退出登录-->
            <div class="installation-loginOut" @click="loginOut(false)">
                {{ $t("set_login_out") }}
            </div>
        </div>
        <!--退出tip-->
        <van-dialog
        v-model="loginTip"
        show-cancel-button
        :cancelButtonText="$t('cancel')"
        :confirm-button-text="$t('sure')"
        :title="$t('set_login_out_tip')"
        @confirm="loginOut(true)"
        >
        </van-dialog>
        <!--tips-->
        <div class="selectPopup" v-if="selectLan">
            <div class="selectPopup-body">
                <div class="close-box clearfix" @click="selectLan = false"><i class="close-icon-02"></i></div>
                <p style="margin-bottom: 20px;">{{ $t("set_lan_title") }}</p><!--根据您的偏好设置语言-->
                <div class="select-box">
                    <p @click="selectedLanguage('cn')">中文（简体）</p>
                    <p class="color999" v-if="selectTitle == 'cn'">{{ $t("set_lan_tips") }}</p><!--界面目前使用的是这种语言-->
                </div>
                <div class="select-box">
                    <p @click="selectedLanguage('hk')">中文（繁體）</p>
                    <p class="color999" v-if="selectTitle == 'hk'">{{ $t("set_lan_tips") }}</p>
                </div>
                <div class="select-box">
                    <p @click="selectedLanguage('en')">English</p>
                    <p class="color999" v-if="selectTitle == 'en'">{{ $t("set_lan_tips") }}</p>
                </div>
            </div>
        </div>
        <!-- 解除微信绑定提示 -->
        <van-dialog
            v-model="unbindTips"
            show-cancel-button
            :title="$t('modal_title_notice')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="onUnbind(true)"
            :message="unbindMsg">
        </van-dialog>
    </div>
</template>

<script>
import Watermark from '@/libs/watermark.js';
import { clearLoginStorage } from '@/utils/tools';
import {setWaterMark} from '../../../config/loginConfig';
export default {
    name: 'Installation',
    data() {
        return {
            userInfo: window.localStorage.getItem('userInfo') && JSON.parse(window.localStorage.getItem('userInfo')).regUser,
            loginTip: false,
            selectLan: false,
            selectTitle: 'cn',
            unbindTips: false, //解除微信绑定提示
            unbindMsg: '', //解除微信绑定提示内容
            usrWeixinId: null // 微信openid
        };
    },
    methods: {
        goPage(url) {
            this.$router.push({path: url});
        },
        loginOut(isOut) {
            if (isOut) {
                this.$axios({
                    method: 'POST',
                    url: '/app/user/single/userlogin/logout'
                }).then(res => {
                    //保留视频进度缓存
                    clearLoginStorage();
                    window.sessionStorage.clear();
                    Watermark.out(); // 清除用户水印
                    if (res) {
                        //如果是APP端的话，暂停所有离线下载任务
                        if (window.plus) {
                            this.stopAllDownload();
                        }
                        //不在此处进行清空localStorage和sessionStorage，在登陆的时候清空
                        this.$router.push({path: '/'});
                    }
                });
                //清理缓存页面
                this.$store.commit('clearKeepAliveList');
            } else {
                this.loginTip = true;
            }
        },
        changeLanguage(oldLan, newLan) {
            this.$axios({
                method: 'get',
                // url: '/app/user/changeLang?lang=' + newLan
                url: '/app/api/user/current?lang=' + newLan
            }).then(res => {
                if (res) {
                    this.$i18n.locale = oldLan;
                    this.type = oldLan;
                    this.selectTitle = oldLan;
                    window.localStorage.setItem('globalLang', oldLan);
                    this.selectLan = false;
                    this.$toast(this.$t('lab_switched_success'));
                    this.$store.commit('clearKeepAliveList');
                }
            });
        },
        selectedLanguage(type) {
            let oldLan = type;
            let newLan;
            //替换（newLan）字符后到后台请求切换语言
            if (type === 'cn') {
                newLan = 'zh-cn';
            }
            if (type === 'hk') {
                newLan = 'zh-hk';
            }
            if (type === 'en') {
                newLan = 'en-us';
            }
            this.changeLanguage(oldLan, newLan);
        },
        /**
         * 解除微信绑定
         * @param is
         */
        onUnbind(is) {
            if (is) {
                if (!this.usrWeixinId) {
                    this.unbindTips = false;
                    return;
                }
                this.$axios({
                    method: 'POST',
                    url: '/app/api/user/wechat/unbind',
                    data: {usrEntId: this.userInfo.usrEntId}
                }).then(res => {
                    this.unbindTips = false;
                    this.$toast(this.$t('unbind_success'));
                    this.usrWeixinId = '';
                });
            } else {
                this.unbindTips = true;
                this.unbindMsg = this.usrWeixinId ? this.$t('confirm_unbind') : this.$t('no_need_to_unbind');
            }
        },
        getUserInfo() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/detail`
            }).then(res => {
                this.usrWeixinId = res.data.usrWeixinId;
            });
        }
    },
    mounted() {
        this.selectTitle = this.$i18n.locale;
        this.getUserInfo();
    }
};
</script>

<style scoped lang="less">
    .installation-password, .installation-loginOut{
        height: 50px;
        background: #ffffff;
        line-height: 50px;
    }
    .installation-password{
        margin: 40px 0 40px;
        padding:0 15px;
    }
    .installation-loginOut{
        margin-top: 40px;
        text-align: center;
    }
    .arrow-right{
        margin-top: 19px;
    }
    .user-info {
        height: 30px;
        width: 30px;
        border-radius: 100%;
        margin-right: 10px;
    }
    .selectPopup-body {
        padding-bottom: 0;
    }
    .selectPopup-body .select-box {
        margin: 25px 0;
    }
    .selectPopup-body p {
        line-height: 18px;
    }
    .selectPopup-body .select-box p:nth-of-type(2) {
        font-size: 14px;
    }
</style>
